CSS@布局（中）：position
CSS 布局（中）：position
position 定位方式
position:static 默认定位
默认的定位方式，元素在文档流中，无法用top，right，bottom，left进行定位
position:relative 相对定位
- 仍在文档流中
- 参照物为元素本身
- 相对定位元素层级较高
解释：
- 仍在文档流中：指的是，这个元素仍然会按照原来的位置占据一定的区域，下面的元素不会因此上来，右边的元素不会因此左移，比如这样：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
| <!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.grandparent {
margin: 10px auto 0;
height: 150px;
width: 410px;
font-family: consolas;
}
.parent {
margin: 0 auto;
height: 150px;
width: 200px;
display: inline-block;
}
.element {
width: 200px;
height: 50px;
}
.first {
background-color: gold;
}
.second {
background-color: lightseagreen;
color: white;
line-height: 50px;
text-align: center;
}
.third {
background-color: pink;
}
.relative {
position: relative;
left: 10px;
top: 10px;
}
</style>
</head>
<body>
<div class="grandparent">
<div class="parent">
<div class="element first"></div>
<div class="element second">position: static;</div>
<div class="element third"></div>
</div>
<div class="parent">
<div class="element first"></div>
<div class="element second relative">position: relative;</div>
<div class="element third"></div>
</div>
</div>
</div>
</body>
</html>
|
- 参照物为元素本身：也就是，元素通过
top,left等定位偏移属性，其位移的原点，是元素本来的位置。比如上面右边的，其 CSS 样式是这样的，向右和向下偏移了10px：
1
2
3
4
5
6
7
8
9
10
11
| .second-child {
width: 200px;
height: 50px;
background-color: lightseagreen;
position: relative;
left: 10px;
top: 10px;
color: white;
line-height: 50px;
text-align: center;
}
|
- 相对定位元素层级较高： 设置了
position的元素会比未设置的元素层级要高。可以这么理解，设置了position视作一类，没有设置的视作一类。他们分别计算层级，而前者一定高于后者。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
| <!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.element{
display: inline-block;
width: 200px;
height: 200px;
border: 3px solid white;
background-color: lightseagreen;
color: white;
text-align: center;
line-height: 200px;
font-family: consolas;
font-size: 24px;
}
.absolute{
position: absolute;
background-color: pink;
}
.relative{
position: relative;
left: 100px;
top: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div style="position: relative; z-index: 10;">
<div class="element absolute">absolute</div>
<div class="element relative">relative</div>
<div class="element default">default</div>
</div>
<div style="position: relative; z-index: 1;">
<div class="element absolute">absolute</div>
<div class="element relative" style="top: 0;">relative</div>
<div class="element default">default</div>
</div>
</body>
</html>
|
你会发现这段代码的效果里： - 第一行中relative的元素覆盖在了它后面的default元素上，因为default元素没有设置position - 第一行的relative元素还覆盖了第二行的relative元素，是因为它们父元素的z-index值的关系。
position: absolute 绝对定位
- 脱离文档流（这个元素脱离了文档，浮出文档）
- 参照物为第一个定位祖先/根元素（也就是 html 元素）
- 默认宽度为内容宽度
解释：
- 脱离文档流：意思就是，这个元素不再占用正常文档流中的空间，且定位方法也和一般元素不一样。比如下图中：
abosolute的元素并没有占据文档的位置，而是浮在了上面，因为它脱离了文档流。具体原因会在下面讲到：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
| <!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.parent{
position: relative;
margin: 0 auto;
width: 420px;
}
.element{
display: inline-block;
width: 200px;
height: 200px;
border: 3px solid white;
background-color: lightseagreen;
color: white;
text-align: center;
line-height: 200px;
font-family: consolas;
font-size: 24px;
}
.absolute{
position: absolute;
background-color: pink;
width:120px;
height: 80px;
line-height: 80px;
}
</style>
</head>
<body>
<div class="parent">
<div class="element default">default</div>
<div class="element absolute">absolute</div>
<div class="element default">default</div>
</div>
</body>
</html>
|
参照物为第一个定位祖先/根元素：在相对定位元素中，我们提到，relative元素的参照物是元素本身，而absolute元素的参照物应该是第一个已定位的祖先，如果没有这样的祖先，那么它的参照物就是根元素，也就是<html>。那么什么叫做已定位的祖先呢，就是它的已经设置了position值的祖先元素。
- 第一点值得注意的是，即便对某个元素设置了
absolute，如果没有进行定位，它会保持在原来的位置上。
- 第二点值得注意的是，默认子元素会被包含在父元素的
content-box里面，但是absolute元素定位的原点，是它的第一个已定位的祖先的padding-box左上角。
默认宽度为内容宽度：即便为这个position:absolute的元素设置成block元素，这个元素默认的宽度仍是内容的宽度。
position: fixed 固定定位
